<template>
  <div class="history">
    <div class="main1">
      <div class="nav">
        <div class="nav-text">
          <a href="">首页</a>
          <a href="">历史</a>
          <a href="">党史</a>
          <a href="">恐怖</a>
          <a href="">自传</a>
          <a href="">专业</a>
          <a href="">科幻</a>
        </div>
        <div class="swiper">
          <!-- 轮播图 -->
          <swiper ref="swiper" @mouseover.native="stopSwiper" @mouseout.native="startSwiper" class="swiper"
            :options="swiperOptions">
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h1_hero1.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h1_hero2.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h1_hero3.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h2_hero1.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h2_hero2.jpg" alt="" />
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <div class="popr">
        <div class="box">
          <h2>历史新书</h2>
          <div class="bianli" v-if="data">
            <div class="bianli-box" v-for="h in data.result" :key="h.id">
              <div class="img2">
                <img :src="$store.state.imgBase + h.bookimg" alt="" />
              </div>
              <div class="xq">
                <h3>{{ h.bookname }}</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span class="span">{{ h.bookauthor }}</span>
                </div>
              </div>
            </div>
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
            <!-- <div class="bianli-box">
              <div class="img2">
                <img src="../../public/img/gallery/best_selling2.jpg" alt="" />
              </div>
              <div class="xq">
                <h3>书名</h3>
                <p class="yincang">
                  内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
                  内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
                </p>
                <div class="zuozhe">
                  <span>期刊</span>
                  <span>作者</span>
                </div>
              </div>
            </div> -->
          </div>
          <div class="page">
            <button>上一页</button>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <button>下一页</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getData();
  },
  data() {
    return {
      data: null,
      swiperOptions: {
        //效果特效
        effect: "cors",
        //循环
        loop: true,

        //自动滚动
        // autoplay: {
        //   delay: 1000,
        //   disableOnInteraction: false,
        // },
      },
    }
  },
  methods: {
    stopSwiper() {
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      this.$refs.swiper.$swiper.autoplay.start();
    },
    goyemian() {
      const target = '/history'
      if (this.$route.path !== target) {
        this.$router.push(target)
      }
    },
    getData() {
      const url = '/history/select?classid=2'
      this.axios.get(url).then((res) => {
        console.log(res)
        this.data = res.data
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.history {
  background-color: rgb(252, 237, 237);
  width: 100%;
  height: 100%;
}

.main1 {
  background-color: rgb(252, 237, 237);
  height: 1660px;

  // 最畅销书籍
  .popr {
    background-color: rgb(252, 237, 237);

    height: 570px;

    // h2 {
    //   font-size: 20px;
    //   font-weight: 500;
    //   margin-bottom: 60px;
    // }
    .box {
      width: 1200px;
      height: 1000px;
      margin: auto;
      background-color: rgb(252, 237, 237);
      // background-color: aquamarine;

      // margin-left: 20px;
      h2 {
        height: 50px;
        // background-color: blueviolet;
        width: 100%;
        text-align: left;
        line-height: 50px;
        font-size: 25px;
        letter-spacing: 2px;
        border-bottom: 2px solid grey;
      }

      .bianli {
        width: 100%;
        height: 900px;
        // background-color: burlywood;
        display: flex;
        flex-wrap: wrap;

        .bianli-box {
          margin-top: 5px;
          width: 33%;
          height: 270px;
          // background-color: brown;
          display: flex;
          // margin-top: 10px;

          .img2 {
            width: 40%;
            height: 200px;

            img {
              height: 260px;
              width: 100%;
            }
          }

          .xq {
            width: 140px;
            height: 300px;
            // background-color: red;
            margin-left: 70px;
            text-align: left;

            h3 {
              text-align: left;
              line-height: 30px;
              height: 30px;
              width: 100px;
              // background-color: beige;
              margin-top: 21px;
              font-size: 18px;
            }

            .yincang {
              width: 140px;
              height: 100px;
              margin-top: 20px;
              line-height: 20px;
              //   文字溢出时省略号显示（伸缩盒子）
              -webkit-box-orient: vertical;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }

            .zuozhe {
              display: flex;
              justify-content: space-around;

              span {
                height: 40px;
                width: 50px;
                margin-top: 50px;
                // background-color: aquamarine;
                line-height: 40px;
                letter-spacing: 2px;
                text-align: center;
                font-size: 17px;
              }
            }
          }
        }
      }

      .page {
        margin-top: 10px;
        display: flex;
        justify-content: center;

        span {
          display: inline-block;
          height: 30px;
          width: 30px;
          margin-left: 5px;
          margin-right: 5px;
          text-align: center;
          background-color: antiquewhite;
          line-height: 30px;
        }
      }
    }
  }

  .nav-text {
    margin: auto;
    // background-color: aquamarine;
    height: 60px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      font-size: 18px;
    }
  }
}
</style>